<template>
  <div v-if="!item.hidden">
    <template v-if="item.layers">
      <el-menu-item
        :index="item.menuId"
        :disabled="item.disabled"
      >
        <template slot="title">
          <el-checkbox
            :disabled="item.disabled"
            :label="item.menuId"
            @change="menuCheckChange"
          >
            {{ item.name }}
          </el-checkbox>
        </template>
      </el-menu-item>
    </template>

    <el-submenu
      v-else
      ref="subMenu"
      :index="item.name"
      popper-append-to-body
    >
      <template slot="title">
        <el-checkbox
          :disabled="item.disabled"
          :label="item.menuId"
          @change="submenuCheckChange"
        >
          {{ item.name }}
        </el-checkbox>
        <span>{{ item.name }}</span>
      </template>
      <sidebar-item
        v-for="child in item.children"
        :key="child.menuId"
        :item="child"
        class="nest-menu"
      />
    </el-submenu>
  </div>
</template>

<script>
export default {
  name: 'SidebarItem',
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  data () {
    return {};
  },
  methods: {
    submenuCheckChange (v) {
      debugger;
    },
    menuCheckChange (v) {
      debugger;
    }
  }
};
</script>
